var o_ul = document.getElementById("innerleft");
var o_div = document.getElementById('navleft');
//ul在页面的占位高，ul到body的距离
var o_top = o_ul.offsetTop;
//页面滚动
window.onscroll = function () {
    //获取页面的滚动距离
    var o_height = document.documentElement.scrollTop || document.body.scrollTop;
    //滚动到一定位置 ul固定到顶部 js实现吸顶
    if (o_top < o_height) {
        o_ul.style.position = "fixed";
        o_ul.style.top = 0;
    }
    else {
        o_ul.style.position = "relative";
    }
}
var o_new = document.getElementById('new');
var lis = o_new.querySelectorAll('li');
var o_list = document.querySelectorAll('#list');

//遍历标题
for (var i = 0; i < lis.length; i++) {
    //给每一个小li自定义属性，index
    lis[i].setAttribute('index', i);
    //注册事件
    lis[i].onclick = function () {
        //先清除所有样式
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        //点击时，加class样式
        this.className = 'current';
        var index = this.getAttribute('index');

        for (var i = 0; i < o_list.length; i++) {
            o_list[i].style.display = 'none';
        }

        o_list[index].style.display = 'block';
    };
}
//1. 获取页面元素
let $hot_product = $('.hot-sell');
let hot_product = [];
//2. 封装功能
//获取服务器上的图片信息
function get_hot_product() {
    $.get('../data/hot-product.json', function fn(arr) {
        console.log(arr)
        load_hot_product(arr);
        //记录arr
        hot_product = arr;
    })
}

function load_hot_product(arr) { //json中的图片数组
    arr.forEach(function fn(value) {
        let hot_product_li = document.createElement('li');
        console.log(value['src'])
        hot_product_li.className = 'hot-sell-product';
        hot_product_li.innerHTML = `
         <ul class="specific-product">
         <li class="product-img1">< img src="../images/caomei.png"></li>
         <li class="product-img2">< img src="../images/redheart.png"></li>
         <li class="product-img">< img src=${value['src']}></li>
         <li class="text">全场大减价</li>
         <li class="product-name">${value['product-name']}</li>
         <li class="product-introduce">${value['product-introduce']}</li>
        
         <li class="product-save">${value['product-save']}</li>
        <li class="product-money">${value['product-money']}</li>
        <li class="product-advise">建议零售价<span>${value['product-advise']}</span></li>
        <li class="tax">包税</li>
        <li class="add-cart"><input type="button" value="加入购物车" class="add-cart"></li>
        </ul>
         `
        $hot_product.append(hot_product_li)
    })
}
//3. 调用函数
get_hot_product();


